<template>
  <div class="flex flex-col h-full overflow-hidden">
    <a-card class="header-card" :body-style="{ padding: '8px', width: '100%', overflow: 'auto' }">
      <div class="flex-between overflow-x-auto">
        <!-- <span class="w-[495px]"></span> -->
        <div class="flex-1">
          <a-radio-group v-model:value="store.tabsKey" button-style="solid" @change="onChangeTabs">
            <a-radio-button :value="0">在区 ({{ store.statusCount.zy || 0 }})</a-radio-button>
            <a-radio-button :value="3">待入区 ({{ store.statusCount.drq || 0 }})</a-radio-button>
            <a-radio-button :value="8">新入区 ({{ store.statusCount.xrq || 0 }})</a-radio-button>
            <a-radio-button :value="7">今日手术 ({{ store.statusCount.jrss || 0 }})</a-radio-button>
            <a-radio-button :value="5">待出区 ({{ store.statusCount.dcq || 0 }})</a-radio-button>
            <a-radio-button :value="6">已出区 ({{ store.statusCount.ycq || 0 }})</a-radio-button>
            <a-radio-button :value="2">待出院 ({{ store.statusCount.dcy || 0 }})</a-radio-button>
            <a-radio-button :value="30">退院 ({{ store.statusCount.ty || 0 }})</a-radio-button>
            <a-radio-button :value="1">已出院 ({{ store.statusCount.ycy || 0 }})</a-radio-button>
          </a-radio-group>
        </div>
        <div class="flex items-center">
          <SelectTable
            v-if="store.tabsKey === 0"
            v-model:value="wardDoctorName"
            placeholder="请选择值班医生"
            class="w-48 mr-2"
            type="医生"
            @select="onSetWardDoctor"
            @input-change="onInputChange"
          />
          <SelectArea class="w-48 mr-2" use-cache set-cache post-url :post-params="{ wardTypeCodes: ['QYLB001', 'QYLB002'] }" @change="onChangeArea" />
          <!-- <a-select
            v-model:value="wardName"
            class="w-48 mr-2"
            :options="wardList"
            placeholder="请选择"
            :field-names="{ label: 'wardName', value: 'id' }"
            @change="onChangeArea"
          /> -->
          <a-radio-group v-if="[0, 5].includes(store.tabsKey)" v-model:value="showType" @change="onChangeShowType">
            <a-tooltip title="列表模式" placement="bottom">
              <a-radio-button :value="1"><BarsOutlined /></a-radio-button>
            </a-tooltip>
            <a-tooltip title="卡片模式" placement="bottom">
              <a-radio-button :value="2"><AppstoreOutlined /></a-radio-button>
            </a-tooltip>
          </a-radio-group>
        </div>
      </div>
    </a-card>
    <a-card
      v-if="dataKey"
      :key="dataKey"
      class="mt-2 flex-1 overflow-hidden"
      :body-style="{ padding: '0', height: '100%', display: 'flex', flexDirection: 'column' }"
    >
      <!-- 在区 -->
      <InArea v-if="store.tabsKey === 0" />
      <!-- 待入区 -->
      <WaitInArea v-else-if="store.tabsKey === 3" />
      <!-- 待出区 -->
      <WaitOutArea v-else-if="store.tabsKey === 5" />
      <!-- 已出区 -->
      <DoneOutArea v-else-if="store.tabsKey === 6" />
      <!-- 待出院 -->
      <WaitOutHospital v-else-if="store.tabsKey === 2" />
      <!-- 已出院 -->
      <DoneOutHospital v-else-if="store.tabsKey === 1" />
      <!-- 今日手术 -->
      <TadayOperation v-else-if="store.tabsKey === 7" />
      <!-- 新入区 -->
      <NewlyAdmitted v-else-if="store.tabsKey === 8" />
      <!-- 退院 -->
      <CancelHospital v-else-if="store.tabsKey === 30" />
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
// import SelectArea from '@/components/SelectArea'
import useStore from './store'
import InArea from './components/InArea'
import WaitInArea from './components/WaitInArea'
import WaitOutArea from './components/WaitOutArea'
import DoneOutArea from './components/DoneOutArea'
import WaitOutHospital from './components/WaitOutHospital'
import DoneOutHospital from './components/DoneOutHospital'
import TadayOperation from './components/TadayOperation'
import NewlyAdmitted from './components/NewlyAdmitted'
import CancelHospital from './components/CancelHospital'

const dataKey = ref()
const router = useRouter()
const store = useStore()
const showType = ref(2)
// const wardName = ref(null)
// const wardList = ref([])

//切换Tab标签
const onChangeTabs = () => {
  router.push({
    path: '/in-nurse/bed-card',
    query: {
      tab: store.tabsKey
    }
  })
  store.getStatusCount()
  if (store.tabsKey === 0) {
    showType.value = 2
  } else {
    showType.value = 1
  }
  store.insiedShowType = 2 // 在区 显示类型 1:列表 2:床位卡
  store.waitOutAreaShowType = 1 // 待出区 显示类型 1:列表 2:床位卡
  store.cardSwitch = false
}
//切换显示类型 1列表/2卡片
const onChangeShowType = () => {
  dataKey.value = Math.random()
  if (store.tabsKey === 0) {
    store.insiedShowType = showType.value
  }
  if (store.tabsKey === 5) {
    store.waitOutAreaShowType = showType.value
  }
}
onMounted(() => {
  if (store.tabsKey === 0) {
    showType.value = store.insiedShowType
    store.cardSwitch = false
  }
  if (store.tabsKey === 5) {
    showType.value = store.waitOutAreaShowType
  }
  // getWardData()
})
//切换病区
const onChangeArea = (val) => {
  store.areaCode = val
  dataKey.value = Math.random()
  store.getStatusCount()
  onGetWardDoctor()
}

const wardDoctorName = ref('')
const onGetWardDoctor = async () => {
  const { code, msg, data } = await post('/inp/zyhs/chooseDutyDoctor', {
    wardId: store.areaCode
  })
  if (code !== 0) return message.error(msg)
  wardDoctorName.value = data?.dutyDoctorName || ''
}
const onSetWardDoctor = async (empInfo) => {
  const { code, msg } = await post('/inp/zyhs/chooseDutyDoctor', {
    wardId: store.areaCode,
    dutyDoctorEmpId: empInfo.empId || ''
  })
  if (code !== 0) return message.error(msg)
  message.success(msg || '操作成功')
  onGetWardDoctor()
}
const onInputChange = (empInfo) => {
  if (!empInfo) {
    onSetWardDoctor(empInfo)
  }
}

onMounted(() => {
  store.tabsKey = +router.currentRoute.value.query.tab || 0
})
</script>
